$(document).ready(function()
	{
		var parent_element	= '#parent';	// identifier of parent element
		var item_element	= '#items';		// identifier of items element
		var post_file		= 'post.php';	// Post Handler
		var wait_note 		= '<option>Loading...</option>'; // wait message
		var zero_note		= "Sorry, No items match the options";	// no item message

		// parent element onchange handler
		$(parent_element).change(function(){
			var pic = new Array();$(parent_element+" option:selected").each(function(){pic.push($(this).val());});
			load_items(pic.toString());
		});

		// load at the first time
		load_parent();
		load_items(0);

		// load items based on selected parent
		function load_items(pic)
			{
				$(item_element).html(wait_note);
				$.post(post_file, { a: 'item', p: pic },
					function(data)
						{
							var opt = "";
							if(data.length)
							{
								for(i=0;i<data.length;i++) {
									var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
									opt += '<option value="' + data[i].code + '"'+style+'>' + data[i].code + " => " + data[i].name + '</option>';
								}
							}
							else
							{
								opt ='<option value="">'+zero_note+'</option>';
							}
							$(item_element).html(opt);
						}
					,'json');
			}

		// load all parent
		function load_parent()
			{
				$(parent_element).html(wait_note);
				$.post(post_file, { a: 'pic' },
					function(data)
					   	{
							var opt = "";
							if(data.length)
							{
								opt += '<option value="0" style="background-color:#fff;color:#999">...</option>';

								for(i=0;i<data.length;i++)
									{
										var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
										opt += '<option value="' + data[i] + '"'+style+'>' + data[i] + '</option>';
									}
							}
							else
							{
								opt ='<option>'+zero_note+'</option>';
							}
							$(parent_element).html(opt);
						}
					,'json');
			}
	});